<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <!-- to的两种写法 -->
      <router-link to="/home" active-class="active">首页</router-link>
      <router-link active-class="active" :to="{ path: '/home' }">Home</router-link>

      <router-link to="/news" active-class="active">新闻</router-link>
      <!-- 跳转子路由  传参-->
      <router-link to="/news/detail?a=1&b=2&content=欢迎你">链接传参</router-link>
      <!-- 或 -->
      <router-link :to="{
        //name:'xiang', //用name也可以跳转
        path: '/news/detail',
        query: {
          id: 1,
          title: 'title',
          content: 'content'
        }
      }">对象传参</router-link>

      <!-- to配合name属性 -->
      <router-link to="/about" active-class="active">关于</router-link>
      <router-link :to="{ name: 'guanyu' }">跳转</router-link>

      <!--
        push是追加历史记录（默认值）。
        replace是替换当前记录。 
      -->
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterLink, RouterView } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'

// 路由组件的两个重要的属性：`$route`和`$router`变成了两个`hooks`
const route = useRoute()
const router = useRouter()

console.log(route.query)
console.log(route.params)
console.log(router.push)
console.log(router.replace)
</script>

<style scoped>
.navigate {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>